<template>
  <div>
    <!-- 面包屑 -->
    <div class="bread-top">
      <div>
        <el-tag
          v-for="(tag, index) in this.$store.state.bread"
          closable
          :key="index"
          :disable-transitions="false"
          @close="handleClose(tag)"
        >
          <router-link tag="span" :to="tag.path">{{ tag.name }}</router-link>
        </el-tag>
      </div>
      <!-- 标签选项 -->
      <div>
        <el-dropdown @command="call" size="mini" split-button type="primary">
          超小尺寸
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">关闭所有标签</el-dropdown-item>
            <el-dropdown-item>关闭其他标签</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <el-main id="main">
      <div class="diva">
        <router-view></router-view>
      </div>
    </el-main>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      inputVisible: false,
      // inputValue: "",
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getheight();
    // 监听页面变化修改高度
    window.addEventListener("resice", this.getheight);
  },
  methods: {
    handleClose(tag) {
      this.$store.state.bread.splice(this.$store.state.bread.indexOf(tag), 1);
      // this.$router.go(-1)
    },
    //  设置导航栏高度
    getheight() {
      let html = document.documentElement || document.body;
      let height = html.clientHeight;
      main.style.height = height - 57 + "px";
    },
    // 关闭所有面包屑
    call(val) {
      if (val == 1) {
        this.$store.commit("call");
        this.$router.push("/index");
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.diva {
  background: #f0f0f0;
}
#main {
  background: #f0f0f0;
  padding: 10px;
  padding-top: 0;
}
.bread-top {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0px 10px;
  align-items: center;
  width: 100%;
  background: #ffffff;
  height: 39px;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.router-link-active {
  color: red;
}
.el-tag--light {
  box-sizing: border-box;
}
</style>
